<template>
<!-- 医院科室 -->
    <div class="Re_depart.vue">
         <header>
        <!-- 返回 -->
            <img class="Re_deppart_back" src="../../../static/imgs/return.png">
            <p>科室</p>

        </header>
        <main>
            <div class="deppart_Left">
                <article class="zhu active">
                    <p>其他</p>
                </article>
                <article class="zhu">
                    <p>妇儿</p>
                </article>
                <article class="zhu">
                    <p>外科</p>
                </article>
                
                <article class="zhu">
                    <p>内科</p>
                </article>

            </div>
            
            <div class="deppart_Right">
            <!-- 第一个其他 -->
                <section class="box1 show1">
                     <!-- <article class="fu">
                        <p>口腔正畸</p>
                    </article>
                    <article class="fu">
                        <p>整形外科</p>
                    </article>
                    <article class="fu">
                        <p>整形外科</p>
                    </article>
                    <article class="fu">
                        <p>整形外科</p>
                    </article>  -->
                </section>

                <!-- 第二个其他 -->
                <section class="box1 show2" style="display:none;">
                     <!-- <article class="fu">
                        <p>生殖内分泌</p>
                    </article>
                    <article class="fu">
                        <p>妇泌尿</p>
                    </article>
                    <article class="fu">
                        <p>计划生育</p>
                    </article>  -->
                </section>

                <!-- 第三个其他 -->
                <section class="box1 show3" style="display:none;">
                    <!-- <article class="fu">
                        <p>整形外科</p>
                    </article>
                    <article class="fu">
                        <p>胸外科</p>
                    </article>
                    <article class="fu">
                        <p>乳腺外科</p>
                    </article>  -->
                </section>

                 <!-- 第四个其他 -->
                <section class="box1 show4" style="display:none;">
                     <!-- <article class="fu">
                        <p>急症科</p>
                    </article>
                    <article class="fu">
                        <p>呼吸内科</p>
                    </article>  -->
                </section>

            </div>



        </main>

    </div>
</template>
<script>
    export default {
        name:'Re_depart'
        
    }
</script>
<style scoped lang='less'>

.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-right,@right);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .px2rem(height,88);
    .px2rem(font-size,40);
    .Flex;
    position: fixed;
    width:100%;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .px2rem(width,55);
        .px2rem(height,53);
      }
}
html,body{
  // width:100%;
  // height:100%;
  background:#f0f2f5;
}
main{
  .Flex;
  height:100%;
  .padding-top(88);
  .font-size(30);
  .deppart_Left{
      width:30%;
      .zhu{
        border-bottom: 1px solid #ccc;
       .padding(20,0,20,20);
      }
      article.active{
        background:#ffffff;
      }

  }
  .deppart_Right{
      width:70%;
      background:#ffffff;
      height:100%;
      .box1{
          .fu{
            .padding(20,0,20,20);
            border-bottom: 1px solid #ccc;
          }
      }
  }
}


</style>



